{% extends "../layouts/admin.html" %} {% block content %}
<header class="header navbar bg-white shadow">
	<div class="btn-group tool-button">
		<a class="btn btn-primary navbar-btn" href="/store/category/index" data-pjax><i class="ti-angle-left"></i> 返回</a>
	</div>
</header>

<div class="content-wrap">
	<div class="wrapper" style="min-height:500px;">
		<section class="panel panel-form">
			<form id="addForm" role="form" class="form-horizontal parsley-form" data-parsley-validate action="/store/category/edit" method="post">
				<div class="row mb10">
					 <input type="hidden" id="id" name="id" value="{{category.id}}">
					<div class="col-lg-12">
						<div class="form-group has-feedback">
							<label for="parentId" class="col-sm-2 control-label">上级分类</label>

							<div class="col-sm-8">
								<div class="input-group">
									<input id="parentId" type="text" class="form-control" placeholder="不选择默认为顶级分类" disabled value="{{parentCategory.name}}" />

									<span class="input-group-btn">
			                             			<button type="button" class="btn btn-primary" data-toggle="modal"
                                                data-target="#dialogSelectParentUnit"><i class="ti-plus"></i>选择
                                        </button>
			                             		</span>
								</div>
								<input type="hidden" name="parentId" value="{{parentCategory.id}}">
							</div>
						</div>
						<div class="form-group">
							<label for="code" class="col-sm-2 control-label">分类级别</label>

							<div class="col-sm-8">
								<select name="level" id="level" class="form-control" disabled>
{% set levels = ["一","二","三","四"] %}
{% for item in levels%}
									<option value="{{loop.index}}" {% if parentCategory.level == loop.index-1 %}selected{%endif%}>{{item}}级分类</option>
									{% endfor %}
								</select>
								<input type="text" name="level" id="level1" hidden/>
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">分类名称</label>

							<div class="col-sm-8">
								<input type="text" id="name" class="form-control" name="name"  value="{{category.name}}"  data-parsley-required="true" placeholder="分类名称">
							</div>
						</div>

						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">图标</label>

							
							<div class="col-sm-8 picture-upload">
								<div id="queue1"></div>
								<div id="img1" class="view">
									{% if category.icon_url%}
									<li>
										<img src="{{category.icon_url}}" alt="" />
										<i class="ti-trash"></i>
									</li>
									{%endif%}
								</div>
								<input id="icon_url" type="file" multiple="false">
								<input type="text"  name="icon_url" hidden   value="{{category.icon_url}}" />
								<div class="clearfix"></div>
							</div>

						</div>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">图片</label>

							
							<div class="col-sm-8 picture-upload">
								<div id="queue2"></div>
								<div id="img2" class="view">
									{% if category.img_url%}
									<li>
										<img src="{{category.img_url}}" alt="" />
										<i class="ti-trash"></i>
									</li>
									{%endif%}
								</div>
								<input id="img_url" type="file" multiple="false">
								<input type="text"  name="img_url" hidden   value="{{category.img_url}}" />
								<div class="clearfix"></div>
							</div>

						</div>

						<div class="form-group">
							<label for="keywords" class="col-sm-2 control-label">关键词</label>

							<div class="col-sm-8">
								<input type="text" id="keywords" class="form-control" name="keywords"   value="{{category.keywords}}" data-parsley-required="true" placeholder="关键词">
							</div>
						</div>
						<div class="form-group">
							<label for="title" class="col-sm-2 control-label">标题</label>

							<div class="col-sm-8">
								<input type="text" id="title" class="form-control" name="title"   value="{{category.title}}"  data-parsley-required="true" placeholder="标题">
							</div>
						</div>
						<div class="form-group">
							<label for="digest" class="col-sm-2 control-label">简介</label>

							<div class="col-sm-8">
								<textarea name="digest" rows="5" placeholder="简介" class="form-control">{{category.digest}}</textarea>
								
							</div>
						</div>
						

					</div>
				</div>
				<div class="col-lg-3"></div>
				<div class="col-lg-6">
					<div class="form-group text-center">
						<label></label>

						<div>
							<button class="btn btn-primary btn-block btn-lg btn-parsley" data-loading-text="正在提交...">提 交</button>
						</div>
					</div>
				</div>
			</form>
		</section>

	</div>
</div>

<!-- 选择上级单位 -->
<div id="dialogSelectParentUnit" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">选择上级分类</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12">
						<div id="jsTreeParentUnit" class="demo"></div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<div class="pull-left">
					<button type="button" class="btn btn-success" data-dismiss="modal" onclick="selectFirstMenu()">设为顶级分类</button>
				</div>
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button type="button" class="btn btn-primary" onclick="selectParentMenu()">确认选择</button>
			</div>
		</div>
	</div>
</div>

<script language="JavaScript">
	function initTreeView() {
		$("#jsTreeParentUnit").jstree({
			plugins: ["wholerow", "json_data"],
			core: {
				data: {
					dataType: "json",
					url: function(node) {
						return node.id === "#" ? "/store/category/tree" : "/store/category/tree?pid=" + node.id
					}
				},
				multiple: false
			}
		}).on("dblclick.jstree", function(node) {
			selectParentMenu();
		});
	}
	//选择父分类
	function selectParentMenu() {
		var tree = $.jstree.reference("#jsTreeParentUnit");
		var node = tree.get_selected(true);
		console.log(node[0]);
		$("#addForm #parentId").val(node[0].text);
		$("#addForm input[name='parentId']").val(node[0].id);
		$("#addForm #level").val(Number(node[0].original.level)+1);
		$("#dialogSelectParentUnit").modal("hide");
	}

	function selectFirstMenu() {
		$("#addForm #parentId").val("顶级分类");
		$("#addForm input[name='parentId']").val("");
		$("#dialogSelectParentUnit").modal("hide");
	}
	$(document).ready(function() {
		initTreeView();
		$('#addForm').ajaxForm({
			dataType: 'json',
			beforeSerialize:function(){
				 $("#addForm #level1").val($("#addForm #level").val());
			},
			beforeSubmit: function(arr, form, options) {
				
				form.find("button:submit").button("loading");
				
			},
			success: function(data, statusText, xhr, form) {
				if(data.errno == 0) {
					Toast.success(data.data);
					//刷新父级菜单
					//form.resetForm();
				}
				else {
					Toast.error(data.errmsg);
				}
				form.find("button:submit").button("reset");
			}
		});

	});

	function delImg(t) {
		$(t).parent().remove();
	}

	$(function() {

		$('#icon_url').uploadifive({
			'auto': true,
			'multi': false,
			'width': '100%',
			'fileObjName': 'picture',
			'buttonText': '<i class="ti-plus"></i>',
			'fileType': 'image/*',
			'fileSizeLimit': 1024,
			'queueSizeLimit': 1,
			'formData': {},
			'queueID': 'queue1',
			'uploadScript': '/store/picture/upload',
			'onUploadComplete': function(file, data) {
				data = JSON.parse(data);
				console.log(data)
				if(data.errno == 0) {
					Toast.success("上传成功");

					var html = "<li><img src='" + data.data[0].url + "'/><i class='ti-trash'  onclick=\"delImg(this)\"></i></li>"

					
					
					$("#img1").html(html);
					$("[name='icon_url']").val(data.data[0].url);
					

				}
				else {
					Toast.error(data.errmsg);
				}
			},
			'onSelect': function(queue) {}
		});
		$('#img_url').uploadifive({
			'auto': true,
			'multi': false,
			'width': '100%',
			'fileObjName': 'picture',
			'buttonText': '<i class="ti-plus"></i>',
			'fileType': 'image/*',
			'fileSizeLimit': 1024,
			'queueSizeLimit': 1,
			'formData': {},
			'queueID': 'queue2',
			'uploadScript': '/store/picture/upload',
			'onUploadComplete': function(file, data) {
				data = JSON.parse(data);
				console.log(data)
				if(data.errno == 0) {
					Toast.success("上传成功");

					var html = "<li><img src='" + data.data[0].url + "'/><i class='ti-trash'  onclick=\"delImg(this)\"></i></li>"

				
					
					$("#img2").html(html);
					$("[name='img_url']").val(data.data[0].url);

				}
				else {
					Toast.error(data.errmsg);
				}
			},
			'onSelect': function(queue) {}
		});
	});
</script>
{% endblock %}